<template>
    <view class="container" :style="themeColor">
        <view class="inputlist">
            <view>
                <view class="label">手机号</view>
                <input
                    type="number"
                    v-model="tel"
                    maxlength="11"
                    placeholder-style="font-size:28rpx;color:#BCBFCC;"
                    placeholder="请输入手机号" />
            </view>
            <view>
                <view class="label">验证码</view>
                <view class="verification">
                    <input
                        type="number"
                        v-model="code"
                        placeholder-style="font-size:28rpx;color:#BCBFCC;"
                        placeholder="请输入验证码" />
                    <view class="line"></view>
                    <button class="get" :disabled="disabled" @click="getCode">
                        {{ countdown }}<text v-show="timestatus">秒重获</text>
                    </button>
                </view>
            </view>
            <view>
                <view class="label">密码</view>
                <input
                    type="password"
                    v-model="password"
                    placeholder="请输入6-12位密码"
                    placeholder-style="font-size:28rpx;color:#BCBFCC;" />
            </view>
            <view>
                <view class="label">确认密码</view>
                <input
                    type="password"
                    v-model="password2"
                    placeholder="请再次输入密码"
                    placeholder-style="font-size:28rpx;color:#BCBFCC;" />
            </view>
            <button class="btn btn-success btn-save" @click="submit">提交</button>
        </view>
    </view>
</template>

<script>
import { mapMutations, mapState } from "vuex"
import storage from "@/uni-sub-base/utils/storage.js"
import config from "@/config/config.js"
import { UserLogin, QuickLogin, SendSmsNoVerifyCode, ReSetPwd } from "@/service/api/member.js"
import { getUserCarList } from "@/utils/cartUtil.js"
import { getUserInfo, getProductDisplay } from "@/utils/appInit.js"
import { getPlatform } from "@/uni-sub-base/utils/platformUtil.js"
export default {
    components: {},
    data() {
        return {
            tel: "",
            code: "",
            password: "",
            password2: "",
            click: true,
            timestatus: false,
            disabled: false,
            countdown: "获取验证码",
        }
    },
    onLoad(e) {},
    mounted() {},
    methods: {
        ...mapMutations(["SET_AUTH"]),
        getCode() {
            var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
            var that = this
            if (that.tel == "") {
                this.easyToast("请输入手机号码")
                return false
            } else if (!myreg.test(that.tel)) {
                this.easyToast("请输入正确手机号码")
                return false
            } else {
                let path = "?tel=" + that.tel + "&validType=8"
                SendSmsNoVerifyCode(path)
                    .then((res) => {
                        that.disabled = true //禁用点击
                        if (res.State == 1) {
                            that.countdown = 60
                            that.timestatus = true
                            that.clear = setInterval(that.countDown, 1000)
                        } else {
                            this.easyToast(res.Msg)
                            that.disabled = false
                        }
                    })
                    .catch((err) => {
                        console.log(err)
                        that.disabled = false
                    })
            }
        },
        countDown() {
            var that = this
            if (!that.countdown) {
                that.disabled = false
                that.timestatus = false
                that.countdown = "获取验证码"
                clearInterval(that.clear)
            } else {
                --that.countdown
            }
        },
        submit() {
            var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
            var that = this
            if (that.tel == "") {
                this.easyToast("请输入手机号码")
                return false
            }
            if (!myreg.test(that.tel)) {
                this.easyToast("请输入正确手机号码")
                return false
            }
            if (that.code == "") {
                this.easyToast("请输入验证码")
                return false
            }
            if (that.password == "") {
                this.easyToast("请输入密码")
                return false
            }
            if (that.password != that.password2) {
                this.easyToast("确认密码不一致")
                return false
            }
            let path = "?tel=" + that.tel + "&pwd=" + that.password + "&validType=8&validCode=" + that.code
            ReSetPwd(path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("修改成功")
                    setTimeout((e) => {
                        this.loginByService()
                    }, 1000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        loginByService() {
            uni.showLoading({
                title: "登录中",
            })
            let param = {
                userName: this.tel,
                password: this.password,
            }
            let path = "?userName=" + this.tel + "&password=" + this.password
            UserLogin(param).then((res) => {
                if (res.State == 1) {
                    if (res.Data.State == 0) {
                        let token = res.Data.Token
                        this.goHome(token)
                    } else if (res.Data.State == 1) {
                        uni.hideLoading()
                        this.easyToast("您已提交注册申请，等待审核中")
                    } else {
                        uni.hideLoading()
                        this.easyToast(res.Data.StateName)
                    }
                } else {
                    uni.hideLoading()
                    this.easyToast(res.Msg)
                }
            })
        },
        goHome(token) {
            this.SET_AUTH(token)
            //#ifdef APP-PLUS
            if (getPlatform() == "ios") {
                let webInfo = storage.getCache("webInfo")
                if (webInfo) {
                    this.url =
                        webInfo.WebDomain +
                        (webInfo.AppHomeIndex ? webInfo.AppHomeIndex : webViewUrl.url.home) +
                        "?uniToken=" +
                        token
                }
                this.isShow = true
                setTimeout((e) => {
                    this.getUserInfo()
                }, 2500)
                getUserCarList()
                getProductDisplay().then((res) => {})
            } else {
                this.isShow = true
                setTimeout((e) => {
                    this.getUserInfo()
                }, 4500)
                getUserCarList()
                getProductDisplay().then((res) => {})
            }
            //#endif
            //#ifndef APP-PLUS
            let webInfo = storage.getCache("webInfo")
            if (webInfo) {
                this.url =
                    webInfo.WebDomain +
                    (webInfo.AppHomeIndex ? webInfo.AppHomeIndex : webViewUrl.url.home) +
                    "?uniToken=" +
                    token
            }
            this.isShow = true

            setTimeout((e) => {
                this.getUserInfo()
            }, 2500)
            getUserCarList()
            getProductDisplay().then((res) => {})
            //#endif
        },
        getUserInfo() {
            let url = "/pages/index/index"
            getUserInfo().then((res) => {
                uni.hideLoading()
                uni.reLaunch({
                    url: url,
                })
            })
        },
    },
}
</script>

<style lang="scss">
.container {
    padding: 60rpx 60rpx 60rpx 60rpx;
}

.title {
    font-size: 50rpx;
    color: $color-gray-1;
}

.inputlist {
    & > view {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 98rpx;
        background: #ffffff;
        border-radius: 24rpx;
        margin-bottom: 24rpx;
        padding: 0 24rpx;
    }

    .label {
        width: 145rpx;
        font-size: 28rpx;
        color: $color-gray-1;
    }

    input {
        flex: 1;
        height: 98rpx;
        font-size: 36rpx;
        color: $color-gray-1;
    }

    .verification {
        flex: 1;
        display: flex;
        align-items: center;

        .line {
            width: 2rpx;
            height: 48rpx;
            background: #efefef;
            margin-right: 24rpx;
        }

        .get {
            color: $app-color-main;
            height: 98rpx;
            display: flex;
            align-items: center;
            font-size: 26rpx;
            padding: 0;
            margin: 0;
            background: none;
            border: none;
            outline: none;

            &::after {
                border: none;
            }
        }
    }
}

.btn {
    margin-top: 48rpx;
}
.btn-save {
    height: 88rpx;
}
</style>
